<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>路径配置</title>
    <link rel="stylesheet"  href="${domain}/css/layui.css" />
    <style>
        .select-div{
            float:left;
            margin: 0 25px 0 10px !important;
            width:120px;
        }
        .padding-lr{
            padding: 9px 3px !important;
        }
        .padding-t{
            padding-top:10px !important;
        }
        .detail{
            margin: 16px;
        }
        .detail td{
            padding: 3px;
            min-width:105px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<#include "top.ftl">
<#include "left.ftl">
    <div class="layui-body" >
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="search-con">
                <button class="layui-btn layui-btn-radius layui-btn-sm " data-type="toEdit">新增方案</button>
                <form class="layui-form" action="">
                <div class="layui-form-item padding-t">
                    <label class="layui-form-label padding-lr">数据库</label>
                    <div class="layui-input-block select-div">
                        <select name="db" lay-filter="db-filter">
                            <option value="">全部</option>
                            <#list dbs as db>
                                <option value="${db}">${db}</option>
                            </#list>
                        </select>
                    </div>

                </div>
                </form>
            </div>
            <table class="layui-hide" id="table" lay-filter="table-filter"></table>
    </div>
        <#include "footer.ftl">
</div>
    <script src="${domain}/layui.js"></script>
    <script type="text/html" id="path-bar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="启用|关闭" lay-filter="state-filter" {{ d.state == 1 ? 'checked' : '' }}>
    </script>

    <script id="detailTpl" type="text/html">
        <table class="detail">
            <tr><td>ID:</td><td>{{d.id}}</td></tr>
            <tr><td>数据库:</td><td>{{d.db}}</td>
            <tr><td>标题:</td><td>{{d.title}}</td>
            <tr><td>基本路径:</td><td>{{d.basePackage}}</td>
            <tr><td>entity路径:</td><td>{{d.entity}}</td>
            <tr><td>dao路径:</td><td>{{d.dao}}</td>
            <tr><td>service路径:</td><td>{{d.service}}</td>
            <tr><td>serviceImpl路径:</td><td>{{d.serviceImpl}}</td>
            <tr><td>controller路径:</td><td>{{d.controller}}</td>
            <tr><td>备注:</td><td>{{d.description}}</td>
            <tr><td>更新时间:</td><td>{{d.updateTime}}</td>
            <tr><td>创建时间:</td><td>{{d.createTime}}</td>
<#--            <tr><td>状态{{d.state}}:</td><td>{{#  if(d.state===1){}}
            启用{{#  }
            else{}}
            关闭
            {{#  } }}</td>
            </tr>-->
        </table>
    </script>

<script >
    layui.use(['table','form'], function(){
        var table = layui.table,
                form = layui.form;
        layui.use('table', function() {
            table.render({
                elem: '#table'
                , url: '/path/list'
                , cols: [[
                      {field: 'id', width: 50, title: 'ID',fixed: true},
                      {field: 'db', width: 80, title: '数据库',fixed: true},
                      {field: 'title', width: 100, title: '标题'},
                      {field: 'basePackage', width: 150, title: '基本路径'},
                      {field: 'entity', width: 180, title: 'entity路径'},
                      {field: 'dao', width: 180, title: 'dao路径'},
                      {field: 'service', width: 180, title: 'service路径'},
                      {field: 'serviceImpl', width: 180, title: 'serviceImpl路径'},
                      {field: 'controller', width: 180, title: 'controller路径'},
                      {field: 'description', width: 130, title: '备注'},
                      {field: 'updateTime', width: 160, title: '更新时间'},
                      {field: 'createTime', width: 160, title: '创建时间'},
                      {field: 'state', title:'状态', width:80, templet: '#switchTpl', unresize: true,fixed: 'right'},
                      {fixed: 'right', width:168, align:'center', toolbar: '#path-bar',title: '操作'}
                ]]
                ,page: true
            });
        });

        //监听开关操作
        form.on('switch(state-filter)', function(obj){
            $.ajax({
                    url:'/path/edit',
                    type:"post",
                    data:{
                        id: this.value,
                        state: obj.elem.checked?1:0
                    },
                    success:function(){
                        console.log();
                    }
                });
        });

        form.on('select(db-filter)',function (data) {
            //执行重载
            table.reload('table', {
                url:'/path/list',
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    dbName:data.value
                }
            });
        });

        table.on('tool(table-filter)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                var content;
                layui.use('laytpl', function() {
                    var laytpl = layui.laytpl;
                    content =  laytpl(detailTpl.innerHTML).render(data);
                });
                layer.open({
                    title:"路径详情",
                    type: 1,
                    skin: 'layui-layer-molv', //样式类名
                    closeBtn: 0, //不显示关闭按钮
                    anim: 1,
                    scrollbar:false,
                    area: '400px',
                    shadeClose: true, //开启遮罩关闭
                    content:content
                });
            }else if(obj.event === 'del'){
                layer.confirm('确认删除'+data.db+"-"+data.title+"么？", function(index){
                    $.ajax({
                        url:'/path/delete',
                        type:"post",
                        data:{
                            id: data.id
                        },
                        success:function(){
                            obj.del();
                            layer.close(index);
                        }
                    });

                });
            } else if(obj.event === 'edit'){
                location.href="/path/toEdit?id="+data.id;
            }
        });

        var $ = layui.$, active = {
            reload: function(){
                var tableName = $('#tableName');

                //执行重载
                table.reload('table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        tableName:tableName.val()
                    }
                });
            },
            toEdit: function () {
                location.href='/path/toEdit';
                return false;
            }
        };

        $('.search-con  .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>
</body>
</html>
